<template>
  <el-card>
    <!-- 图表渲染容器: 必须指定高度 -->
    <div id="line" style="height: 400px"></div>
    <el-divider></el-divider>
    <!-- 富文本编辑器 -->
    <el-button @click="getContent" type="primary">获取内容</el-button>
    <el-button type="success" @click="setContent">设置内容</el-button>
    <!-- height 和 width 不需要加单位 -->
    <wangeditor
      ref="editor"
      id="editor"
      v-model="content"
      width="100%"
      height="400"
      :menus="menus"
    />
  </el-card>
</template>

<script>
// 1-导入echarts
import * as echarts from "echarts";
// 1-导入vue-wangeditor
import wangeditor from "vue-wangeditor";
export default {
  // 2-注册组件
  components: { wangeditor },
  data() {
    return {
      menus:[
        'source',	// 源码模式
        '|',
        'bold',	// 粗体
        'underline',	// 下划线
        'italic',	// 斜体
        'strikethrough',	// 中线
        'eraser',	// 清空格式
        'forecolor',	// 文字颜色
        'bgcolor',	// 背景颜色
        '|',
        'quote',	// 引用
        'fontfamily',	// 字体
        'fontsize',	// 字号
      ],
      content: `
        <h1 style="color:red">hello wangeditor</h1>
      `,
    };
  },
  mounted() {
    this.lineCharts();
  },
  methods: {
    getContent() {
      const html = this.$refs.editor.getHtml();
      console.log(html);
    },
    setContent() {
      const html = `
        <h1>你好 ,wangeditor</h1>
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
      `;
      this.$refs.editor.setHtml(html);
    },
    lineCharts() {
      // 2-初始化echarts
      const line = echarts.init(document.querySelector("#line"));
      // 3-配置对象
      const option = {
        // 标题
        title: {
          text: "本周销售业绩",
        },
        // 鼠标悬浮提示
        tooltip: {
          trigger: "axis",
        },
        // 缩放工具
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      // 4-设置配置对象, 渲染图表
      line.setOption(option);
    },
  },
};
</script>

<style>
</style>